1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
/* IMPORT */
import { DataTableSkeleton } from '@/components/data-table/data-table-skeleton';
import { getPreviousWeekday, searchParamsCache } from '@/lib/risk-management/validations';
import { getRisksView } from '@/lib/risk-management/service';
import { getValidFilters } from '@/lib/data-table';
import { InformationButton } from '@/components/information/information-button';
import { RISK_DASHBOARD_MENU_ITEM_LIST } from '@/config/risksConfig';
import RisksDashboard from '@/lib/risk-management/table/risks-dashboard';
import RisksDateRangePicker from '@/lib/risk-management/table/risks-date-range-picker';
import RisksTable from '@/lib/risk-management/table/risks-table';
import { Shell } from '@/components/shell';
import { Skeleton } from '@/components/ui/skeleton';
import { Suspense } from 'react';
import { type DateRange } from 'react-day-picker';
import { type SearchParams } from '@/types/table';
import { useTranslation } from "@/i18n"
// ----------------------------------------------------------------------------------------------------
/* TYPES */
interface RiskManagementPageProps {
params: Promise<{lng: string}>
searchParams: Promise<SearchParams>;
}
// ----------------------------------------------------------------------------------------------------
/* RISK MANAGEMENT PAGE */
async function RiskManagementPage(props: RiskManagementPageProps) {
const { searchParams } = props;
const searchParamsResult = await searchParams;
const search = searchParamsCache.parse(searchParamsResult);
const validFilters = getValidFilters(search.filters);
const {lng} = await props.params
const {t} = await useTranslation(lng, 'menu')
const promises = Promise.all([
getRisksView({
...search,
filters: validFilters,
}),
]);
const previousWorkday = getPreviousWeekday(new Date());
const defaultFrom = new Date(previousWorkday);
defaultFrom.setHours(0, 0, 0, 0);
const defaultTo = new Date(previousWorkday);
defaultTo.setHours(23, 59, 59, 999);
const defaultDateRange: DateRange = {
from: defaultFrom,
to: defaultTo,
};
return (
<Shell className="gap-2">
<div className="flex items-center justify-between space-y-2">
<div className="flex items-center justify-between space-y-2">
<div>
<div className="flex items-center gap-2">
<h2 className="text-2xl font-bold tracking-tight">
{t('menu.vendor_management.risk_by_agency')}
</h2>
<InformationButton pagePath="evcp/risk-management" />
</div>
<p className="text-muted-foreground">
{t('menu.vendor_management.risk_by_agency_desc')}
</p>
</div>
</div>
</div>
<Suspense fallback={<Skeleton className="h-7 w-52" />}>
<RisksDateRangePicker
defaultDateRange={defaultDateRange}
triggerSize="sm"
triggerClassName="ml-auto w-56 sm:w-60"
align="end"
shallow={false}
/>
</Suspense>
<Suspense
fallback={
<div className="max-w-lg grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-16 gap-y-4 pb-8">
{RISK_DASHBOARD_MENU_ITEM_LIST.map((item) => (
<div key={item} className="w-32 flex flex-col items-center justify-center gap-2">
<div className="font-bold">{item}</div>
<Skeleton className="w-full h-12" />
</div>
))}
</div>
}
>
<RisksDashboard
targetValues={RISK_DASHBOARD_MENU_ITEM_LIST}
defaultDateRange={defaultDateRange}
/>
</Suspense>
<Suspense
fallback={
<DataTableSkeleton
columnCount={11}
searchableColumnCount={1}
filterableColumnCount={2}
cellWidths={['10rem', '40rem', '12rem', '12rem', '8rem', '8rem']}
shrinkZero
/>
}
>
<RisksTable promises={promises} />
</Suspense>
</Shell>
)
}
// ----------------------------------------------------------------------------------------------------
/* EXPORT */
export default RiskManagementPage;
|
